<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>01-BFC</title>
	</head>
	<body>
		<!--
    一、什么是 BFC？
     1. BFC(Block Formatting Context) 是 块级格式上下文，可以理解成元素的一个“特异功能”。
     2. 该“特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
     3. 所谓激活“特异功能”，专业点说的就是：该元素创建了 BFC（又称：开启了 BFC）。

     二、开启了BFC能解决什么问题？
     1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
     2. 元素开启 BFC 后，自身不会被浮动元素所覆盖。
     3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

     三、如何开启 BFC？
     1. html根元素;
     2. 浮动元素；
     3. 绝对定位，固定定位元素；
     4. 行内块元素；
     5. 表格单元格：table、thead、tbody、tfoot、tr、td、th、caption；
     6. overflow 值不为 visible 的块元素；
     7. flex 伸缩项目；
     8. 多列容器；
     9. column-span: all; （即使该元素没有包裹在多列容器中）；
     10. display的值，设置为 flow-root。
   -->
	</body>
</html>
